﻿@model LanusMarket.Models.Ubicacion

<h2>@ViewBag.Action  @ViewBag.Entity</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validity.pack.js")" type="text/javascript"></script>

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

<script language="javascript" type="text/javascript">
    $(document).ready(function () {

        $("#Telefono").mask("9999-9999");
        
        $("#PaisID").change(function () {
            $("#LocalidadID > option").remove();
            $("#ProvinciaID > option").remove();            
            $.getJSON('/Ubicacion/GetProvinciasPorPais/' + $(this).val(), function (response) {

                var provincias = response;
                var ddprovincias = $("#ProvinciaID");                

                for (i = 0; i < provincias.length; i++) {
                    ddprovincias.append($("<option />").val(provincias[i].Value).text(provincias[i].Text));
                }

                LoadLocalidades($("#ProvinciaID"));

            });
        });

        $("#ProvinciaID").change(function () {
            LoadLocalidades(this);
        });
    });

    function LoadLocalidades(obj) {
        $("#LocalidadID > option").remove();
        $.getJSON('/Ubicacion/GetLocalidadesPorProvincia/' + $(obj).val(), function (response) {

            var localidades = response;
            var ddlocalidades = $("#LocalidadID");
            
            for (i = 0; i < localidades.length; i++) {
                ddlocalidades.append($("<option />").val(localidades[i].Value).text(localidades[i].Text));
            }
        });
    }

</script>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Ubicacion</legend>
        <div style="float:left;">
            <div class="editor-label">
                @Html.LabelFor(model => model.Titulo)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Titulo)
                @Html.ValidationMessageFor(model => model.Titulo)
            </div>

            <div class="editor-label">
                @Html.LabelFor(model => model.Descripcion)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Descripcion)
                @Html.ValidationMessageFor(model => model.Descripcion)
            </div>

            <div class="editor-label">
                @Html.LabelFor(model => model.Email)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Email)
                @Html.ValidationMessageFor(model => model.Email)
            </div>

            <div class="editor-label">
                @Html.LabelFor(model => model.Telefono)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Telefono)
                @Html.ValidationMessageFor(model => model.Telefono)
            </div>

            <div class="editor-label">
                @Html.LabelFor(model => model.Link)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Link)
                @Html.ValidationMessageFor(model => model.Link)
            </div>

            <div class="editor-label">
                @Html.LabelFor(model => model.Latitud)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Latitud)
                @Html.ValidationMessageFor(model => model.Latitud)
            </div>

            <div class="editor-label">
                @Html.LabelFor(model => model.Longitud)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Longitud)
                @Html.ValidationMessageFor(model => model.Longitud)
            </div>
            <div class="editor-label">
                @Html.LabelFor(model => model.SearchKeysID,"Keys")
            </div>
            <div class="editor-field">
                @Html.ListBox("SearchKeysID")            
                @Html.ValidationMessageFor(model => model.SearchKeysID)
            </div>
             
        </div>
        <div id="Maps" style="float:left;margin-left:25px;">          
            <div style="margin-bottom:10px;">
                <div style="float:left;margin-right:25px;" >
                    <div class="editor-label">
                        @Html.LabelFor(model => model.PaisID,"Pais")
                    </div>
                    <div class="editor-field">
                        @Html.DropDownList("PaisID",String.Empty)            
                        @Html.ValidationMessageFor(model => model.PaisID)
                    </div>
                    <div class="editor-label">
                        @Html.LabelFor(model => model.ProvinciaID,"Provincia")
                    </div>
                    <div class="editor-field">
                        @Html.DropDownList("ProvinciaID",String.Empty)
                        @Html.ValidationMessageFor(model => model.ProvinciaID)
                    </div>
                    <div class="editor-label">
                        @Html.LabelFor(model => model.LocalidadID, "Localidad")
                    </div>
                    <div class="editor-field">
                        @Html.DropDownList("LocalidadID", String.Empty)
                        @Html.ValidationMessageFor(model => model.LocalidadID)
                    </div>
                </div>
                <div style="float:left;">
                    <div class="editor-label">
                        @Html.LabelFor(model => model.Calle)
                    </div>
                    <div class="editor-field">
                        @Html.EditorFor(model => model.Calle)
                        @Html.ValidationMessageFor(model => model.Calle)
                    </div>
                    <div class="editor-label">
                        @Html.LabelFor(model => model.Altura)
                    </div>
                    <div class="editor-field">
                        @Html.EditorFor(model => model.Altura)
                        @Html.ValidationMessageFor(model => model.Altura)
                    </div>
                    <div class="editor-label">
                        @Html.LabelFor(model => model.CodigoPostal)
                    </div>
                    <div class="editor-field">
                        @Html.EditorFor(model => model.CodigoPostal)
                        @Html.ValidationMessageFor(model => model.CodigoPostal)
                    </div>
                </div>
                <div style="clear:both;"></div> 
            </div>
            <div style="clear:both;"></div>
            <script type="text/javascript">
                $(document).ready(function () {
                    
                    $('#Latitud').attr('readonly', 'readonly');
                    $('#Longitud').attr('readonly', 'readonly');

                    $('#chkValidarUbicacion').click(function () {
                        
                        if ($(this).attr('checked')) {
                            var pais = $('#PaisID option:selected').text();
                            var provincia = $('#ProvinciaID option:selected').text();
                            var localidad = $('#LocalidadID option:selected').text();

                            $.validity.start();

                            $('#LocalidadID').require("La Localidad es requerida");
                            $('#Calle').require("La Calle es requerida");
                            $('#Altura').require("La Altura es requerida");

                            var result = $.validity.end();

                            if (result.valid) {
                                var localidad = $('#LocalidadID option:selected').text();
                                var calle = $('#Calle').val();
                                var altura = $('#Altura').val();
                                var direccion = pais + ', ' + provincia + ', ' + localidad + ', ' + calle + ' ' + altura;
                                showAddress(direccion);
                                $('#btnCrear').attr('disabled', '');
                            } else {
                                $('#chkValidarUbicacion').attr('checked', false);
                                $('#btnCrear').attr('disabled', 'disabled')
                            }
                        } else {
                            $('#btnCrear').attr('disabled', 'disabled')
                        }
                    });
                    initialize();                   
                });
                
                var geocoder;
                var map;
                function initialize() {
                    geocoder = new google.maps.Geocoder();
                    var latlng = new google.maps.LatLng(-34.397, 150.644);
                    var myOptions = { zoom: 18, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }
                    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                }

                function showAddress(address) {
                    geocoder.geocode({ 'address': address }, function (results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            map.setCenter(results[0].geometry.location);
                            var marker = new google.maps.Marker({
                                map: map,
                                position: results[0].geometry.location
                            });
                            var loc = results[0].geometry.location;
                            $('#Latitud').val(loc.lat());
                            $('#Longitud').val(loc.lng());

                            $('#lbLatitud').val(loc.lat());
                            $('#lbLongitud').val(loc.lng());

                        } else {
                            alert("Geocode was not successful for the following reason: " + status);
                        }
                    });
                }                 

            </script>            
            <div id="map_canvas" style="width: 500px; height: 300px;"></div>
            <div style="margin-top:10px;">
                <input type="checkbox" value="Validar Ubicacion" id="chkValidarUbicacion" title="Validar Ubicacion" />Validar Ubicacion <br />
                <input id="btnCrear" type="submit" value="Crear" disabled="disabled"/>
            </div>
        </div>
    </fieldset>
}

<div>
    @Html.ActionLink("Volver al listado", "Index")
</div>
